// renders a colorpicker to the target element. callback returns selected colour
// getColor() - returns currently selected colour
// setColor(index || hex) - sets the colour by array index or by hex color name 
// usage:
// new Colorpicker({ target: {$element}, defaultColor: {number}, scope: {object}, callback: {function} });

/*colorpicker*/
/*
.ColorPicker { width: 152px !important; }
.ColorPicker div {float:left;width:18px;height:18px;cursor:pointer;overflow:hidden;margin:0 0 0 1px;}
.ColorPicker .separator { background: #F5F5F5; border: 1px solid #666666; border-width:1px 0; clear:both; float:none; height:2px; width:153px; margin: 0; }
.ColorPicker .check { cursor:default; background:url(../img/checkmarks.gif) no-repeat center 3px;}
.ColorPicker .check-white { background-position: center 3px;}
.ColorPicker .check-black { background-position: center -10px;}
*/

var Colorpicker=function(conf){
	var _html='', defaults = { target: $('body'), defaultColor: 0, columns: 0, scope: window, callback: function(){} };
	this.colors=[
			'#000000','#444444','#666666','#999999','#CCCCCC','#EEEEEE','#F3F3F3','#FFFFFF', '-',
			'#FF0000','#FF9900','#FFFF00','#00FF00','#00FFFF','#0000FF','#9900FF','#FF00FF', '-',
			'#F4CCCC','#FCE5CD','#FFF2CC','#D9EAD3','#D0E0E3','#CFE2F3','#D9D2E9','#EAD1DC',
			'#EA9999','#F9CB9C','#FFE599','#B6D7A8','#A2C4C9','#9FC5E8','#B4A7D6','#D5A6BD',
			'#E06666','#F6B26B','#FFD966','#93C47D','#76A5AF','#6FA8DC','#8E7CC3','#C27BA0',
			'#CC0000','#E69138','#F1C232','#6AA84F','#45818E','#3D85C6','#674EA7','#A64D79',
			'#990000','#B45F06','#BF9000','#38761D','#134F5C','#0B5394','#351C75','#741B47',
			'#660000','#783F04','#7F6000','#274E13','#0C343D','#073763','#20124D','#4C1130'
		];
	
	this.conf = {};
	$.extend(this.conf, defaults, conf);
		
   for(var i=0, il = this.colors.length; i<il; i++){
		if (this.colors[i]=='-') _html += '<div class="separator"></div>';
		else  _html += '<div style="background-color:'+this.colors[i]+';"></div>';
	}	
	this.picker=$('<div class="ColorPicker">'+_html+'</div>');
   this.conf.target.html(this.picker);
	this.picker.click(function(el){this.setColor($(el.target).css('backgroundColor')); });
	this.setColor(this.conf.defaultColor);
	
	return this;
};

Colorpicker.prototype.setColor=function(col){
	if (!col||col=='transparent') return;
	this.picker.find('.check').removeClass('check check-white check-black');
	if (typeof col=='number') color=col; // col is int index
	else if (typeof col=='string'){
		if(col.indexOf('rgb')==0){
			col=col.substring(4,col.lastIndexOf(')'));
			var cA=col.split(',');
			color=this.colors.in_array('#'+rgb(cA[0].trim(),cA[1].trim(),cA[2].trim())); // col is rgb string, i.e. rgb(12,15,16)
		}
		else color=this.colors.in_array(col); // col is hex string
	} 
	if (!color && color!=0) return; // color not found
	this.picker.find('div').eq(color).addClass('check').addClass(isdark(this.colors[color]) ? 'check-white' : 'check-black');
	this.conf.callback.call(this.conf.scope, this.colors[color]);
	
	function isdark(color){var colr=parseInt(color.substr(1),16); return (colr>>>16)+((colr>>>8)&0x00ff)+(colr&0x0000ff)<500;}
	function rgb(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
	function toHex(N){if(N==null)return "00";var chr="0123456789ABCDEF";N=parseInt(N);if(N==0||isNaN(N))return "00";N=Math.max(0,N);N=Math.min(N,255);N=Math.round(N);return chr.charAt((N-N%16)/16)+chr.charAt(N%16);}
};
	
Colorpicker.prototype.getColor=function(){ var idx=this.picker.find('div.check'); if (idx) idx=idx.index(); return this.colors[idx] }

